<!--
 * @Descripttion: 
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-06-29 11:51:35
 * @LastEditTime: 2021-09-24 11:32:36
-->
<template>
  <div class="relate-room">
    <div>
      <p>已选房源：{{relateRoomCode.length}}</p>
      <p class="title">请选择需要关联的户型</p>
      <!-- <Table class="room-list" ref="TableHeight" :columns="roomColumn" :data="roomTypeList">
      </Table> -->
      <house-type path='relateRoom' @relateRoomHandel='relateRoom'></house-type>
    </div>
  </div>
</template>
<script>
  import houseType from '../../HouseTypeManagement/HouseTypeManagement.vue'
  import roomMgr from '@/biz/modeling/room/room'
  export default {
    components: {
      houseType
    },
    props: ['relateRoomList'],
    data() {
      let _this = this
      return {
        query: {},
        relateRoomCode: [],
        roomTypeList: [],
        roomColumn: [
        {
          title: '序号',
          type: 'index',
          minWidth: 120,
        },
        {
          title: '户型名称',
          key: 'houseTypeName',
          minWidth: 120,
        },
        {
          title: '户型',
          minWidth: 120,
          key: 'houseType',
          render: (h, row) => {
            let result = `${row.row.bedroom || '0'}室${
              row.row.parlor || '0'
            }厅${row.row.kitchen || '0'}厨${row.row.bathroom || '0'}卫`
            return h('span', result)
          },
        },
        {
          title: '建筑面积(㎡)',
          key: 'constructionArea',
          minWidth: 120,
        },
        {
          title: '操作项',
          key: 'operation',
          minWidth: 120,
          render(h, params) {
            return h('div', [
              h(
                'a',
                {
                  on: {
                    click: (e) => {
                      e.stopPropagation()
                      _this.relateRoom(params.row)
                    },
                  },
                },
                '关联该户型'
              ),
            ])
          },
        }, ],
      }
    },
    created() {
      this.relateRoomCode = this.relateRoomList.map((item) => {
        return item.roomCode
      })
      this.getHouseTypeList()
    },
    methods: {
      // 户型信息
      getHouseTypeList() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
        }
        roomMgr.getHouseTypeList(params).then((res) => {
          this.roomTypeList = res
        })
      },
      // 关联
      relateRoom(row) {
        let roomArr = []
        this.$Modal.confirm({
          title: '关联户型',
          content: `<p>请确认，是否将${this.relateRoomCode.length}个房源与"${row.houseTypeName}"户型关联？</p>`,
          onOk: () => {
            this.relateRoomList.forEach((ele) => {
              ele.roomType = row.houseTypeId
              roomArr.push(ele)
            })
            let params = {
              roomEditVOS: roomArr,
            }
            roomMgr.editRoomFun(params).then((res) => {
              this.$Message.info('关联成功。')
              this.$emit('onClose')
              this.$emit('onSearch')
            })
          },
          onCancel: () => {
            this.$Message.info('你取消了关联。')
          },
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .relate-room {
    .title {
      margin: 20px 0;
    }

    .room-list {
      margin: 20px 0;
    }
  }
</style>